<template>
    <div class="carrier_product">
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="产品搜索：" class="mt_5">
                        <el-input v-model="formInline.user" placeholder="产品名"></el-input>
                    </el-form-item>
                    <el-button type="primary">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary" @click="dialogVisible1 = true">刷选</el-button>
                    <el-button type="primary" @click="dialogVisible2 = true">导入模板</el-button>
                
                    <router-link class="el-button el-button--primary" type="button" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/new'">
                        新增
                    </router-link>
                </el-form>
                <el-dialog title="产品筛选" :visible.sync="dialogVisible1" width="40%">
                    <el-form :model="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="运营商类别：">
                            <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户业务类型：">
                            <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="服务类型：">
                            <el-select v-model="ruleForm.value3" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品有效性：">
                            <el-radio-group v-model="ruleForm.youxiao">
                                <el-radio :label="1">有效</el-radio>
                                <el-radio :label="2">无效</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary">查询</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="套餐模板查询" :visible.sync="dialogVisible2" width="70%">
                    <el-table :data="tableData1" stripe border style="width: 100%">
                        <el-table-column type="selection" label="id" width="40" prop="id">
                        </el-table-column>
                        <el-table-column label="产品名称" prop="name" width="150">
                        </el-table-column>
                        <el-table-column prop="category" label="运营商类别" width="100">
                        </el-table-column>
                        <el-table-column prop="moshi" label="用户业务模式" width="200">
                        </el-table-column>
                        <el-table-column prop="taocancategory" label="套餐类型" width="80">
                        </el-table-column>
                        <el-table-column prop="taocanzhou" label="套餐周期" width="80">
                        </el-table-column>
                        <el-table-column prop="taocanliu" label="套餐流量" width="100">
                        </el-table-column>
                        <el-table-column prop="taocanprice" label="套餐价格">
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                        <el-button type="primary">查询</el-button>
                    </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="float-right">
                 <el-popover placement="bottom" trigger="hover" title="筛选条件">
                    <el-menu>
                        <el-menu-item index="1">
                            <el-checkbox v-model="checked1">运营商</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-checkbox v-model="checked2">套餐单位</el-checkbox>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <el-checkbox v-model="checked3">套餐周期</el-checkbox>
                        </el-menu-item>
                    </el-menu>
                    <span slot="reference">
                        <el-button type="primary">
                            <i class="iconfont icon-loudou"></i>
                        </el-button>
                    </span>
                </el-popover>
            </el-col>
        </el-row>
        <el-table :data="tableData" fit stripe border style="width: 100%">
            <el-table-column prop="code" label="产品编号">
            </el-table-column>
            <el-table-column prop="name" label="产品名称" width="110">
            </el-table-column>
            <el-table-column prop="moshi" label="用户业务模式" width="200">
            </el-table-column>
            <el-table-column prop="category" label="运营商类别" width="110">
            </el-table-column>
            <el-table-column prop="carriar" label="运营商" width="110" v-if="checked1">
            </el-table-column>
            <el-table-column prop="type" label="套餐类型" width="110">
            </el-table-column>
            <el-table-column prop="taocandan" label="套餐单位" width="110" v-if="checked2">
            </el-table-column>
            <el-table-column prop="taocanzhou" label="套餐周期" width="110" v-if="checked3">
            </el-table-column>
            <el-table-column prop="taocanliu" label="套餐流量" width="110">
            </el-table-column>
            <el-table-column prop="taocanprice" label="套餐价格" width="100">
            </el-table-column>
            <el-table-column prop="isActivity" label="产品有效性" width="100">
            </el-table-column>
            <el-table-column prop="methods" label="操作" width="200">
                <template slot-scope="scope">
                    <router-link size="mini" type="primary" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/edit'" class="el-button el-button--default el-button--mini">
                        编辑
                    </router-link>
                    <router-link size="mini" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/terminal_products_price'" class="el-button el-button--primary el-button--mini">
                        历史价格
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: '',
                },
                dialogVisible1: false,
                dialogVisible2: false,
                formOnline: {
                    activity: '1'
                },
                ruleForm: {
                    value1: '',
                    value2: '',
                    value3: '',
                    youxiao: 1
                },
                option1: [{
                    value: 'china_mobile',
                    label: '移动'
                    }, {
                    value: 'china_unicom',
                    label: '联通'
                    }, {
                    value: 'china_telecom',
                    label: '电信'
                    }, {
                    value: 'virtual_carrier',
                    label: '虚拟运营商'
                }],
                option2: [
                    {
                        value: '选项一',
                        label: '沉默期'
                    },
                    {
                        value: '选项二',
                        label: '单档位套餐'
                    }
                ],
                option3: [
                    {
                        value: '选项一',
                        label: '日套餐'
                    },
                    {
                        value: '选项二',
                        label: '月套餐'
                    }
                ],
                tableData: [
                    {
                        code: 'Z00066',
                        name: '222',
                        moshi: '月叠加包（分销商-分销商）',
                        category: '联通',
                        carrier: '555',
                        type: '日套餐',
                        taocandan: 'MB',
                        taocanzhou: '1',
                        taocanliu: '22.0 MB',
                        taocanprice: '22.04',
                        isActivity: '有效'
                    }
                ],
                tableData1: [
                    {
                        name: '月流量 3G 套餐',
                        category: '联通',
                        moshi: '电信月租大王卡（分销商）',
                        taocancategory: '日套餐',
                        taocanzhou: 1,
                        taocanliu: '3.0GB',
                        taocanprice: '30.0'
                    }
                ],
                checked1: false,
                checked2: false,
                checked3: false
            }
        },
        mounted() {
        },
        methods: {
            
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }
</style>